<template>
  <!-- 基础旭日图 -->
  <div
    ref="chartEl"
    :style="stylesConfig"
    v-resize="resizeHandler"
    class="compo-public-style"
  ></div>
</template>

<script setup>
import { computed } from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});

let initData = [
  {
    name: 'Grandpa',
    children: [
      {
        name: 'Uncle Leo',
        value: 15
      }
    ]
  },
  {
    name: 'GrandMa',
    children: [
      {
        name: 'Father Leo',
        value: 15
      }
    ]
  },
  {
    name: 'Nancy',
    children: [
      {
        name: 'Cousin Betty',
        value: 20
      }
    ]
  }
];
const mockData = {
  legend: {
    show: true //是否展示图例
  },

  series: {
    type: 'sunburst',
    data: initData,
    radius: [40, '100%'], //中间是否是空心的
    // itemStyle: {
    //   borderRadius: 7,
    //   borderWidth: 2
    // },
    label: {
      rotate: 'radial'
    }
  }
};

//图形类型配置
const chartTypeConfig = {
  type: 'sunburst'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>
<style scoped lang="scss"></style>
